

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
    <!-- import Vue before Element -->
    <script src="js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="js/index.js"></script>



</head>
<body>
<div id="app">

    <div @click="fun1('datas')">
        {{msg}}
    </div>
    <div>
        <font :color="col" :size="fontsize">测试字体</font>
    </div>

    <div>
        <table>
            <tr>
                <td>日期</td>
                <td>姓名</td>
                <td>地址</td>
            </tr>
            <tr v-for="(key,value) in tableData">
                <td>{{key.date}}</td>
                <td>{{key.name}}</td>
                <td>{{key.address}}</td>
            </tr>
        </table>
    </div>

    <div>
        <input type="text" v-model="username" @change="fun3()">
    </div>


</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "apps",
            col: "red",
            fontsize: "10",
            username:"zhangdapao"
        },
        methods:{
            fun1(data){
                alert(data);
                this.msg = "datas";
            },

            fun3(){

                alert(this.username);
            }

        }

    })
</script>
</html>

